<!--  -->
<template>
  <div class="content">
    <van-popup v-model="showPopup" position="bottom" round @click-overlay="onCancel">
      <van-picker :title="clientTitle" show-toolbar :columns="pickerList" @confirm="onConfirm" :value-key="valuekey" @cancel="onCancel" @change="onChange" :default-index="index"  />
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "",
  props: {
    showPopup: Boolean,
    clientTitle: String,
    valuekey: String,
    typeName: String,
    index:Number,
    pickerList: Array
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    showPopup: {
      handler(newName, oldName) {
        console.log(newName);
      },
      immediate: true
    }
  },
  //方法集合
  methods: {
    onConfirm(event) {
      console.log(event);
      this.$emit("pickerConfirm", { id: event.id, typeName: this.typeName, title: event[this.valuekey], valuekey: this.valuekey });
      // Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      // Toast("取消");
      // this.value = false;
      console.log("取消");
      this.$emit("pickerCancel", this.showPopup);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
</style>
